<template>
  <!-- 滚动容器：实现垂直滚动 -->
  <scroll-view 
    scroll-y 
    class="scroll-container" 
    @scrolltolower="loadMore"
  >
    <view class="container">
      <!-- 头部：阅读统计 + 清除按钮 -->
      <view class="header">
        <view class="clear-section" v-if="novelList.length !== 0">
          <text class="book-count">你已经阅读了{{ novelList.length }}本书</text>
          <text class="clear-text" @click="handleClearClick">清除</text>
        </view>
      </view>
      
      <!-- 小说列表区域 -->
      <view class="novel-list">
        <!-- 空状态 -->
        <view v-if="novelList.length === 0" class="empty-state">
          <image src="/static/novel/noHistory.png" class="empty-image"></image>
          <text>暂无阅读记录</text>
        </view>
        
        <!-- 历史记录列表 -->
        <view class="novel-item" v-for="(re, index) in novelList" :key="index">
          <image 
            class="novel-cover" 
            :src="re.novel.image" 
            @click="goRead(re.novel.novelId)"
          />
          <view class="novel-info">
            <view class="novel-title-wrapper">
              <text 
                class="novel-title" 
                @click="goRead(re.novel.novelId)"
              >{{ re.novel.novelName }}</text>
              <!-- 删除按钮（阻止事件冒泡） -->
              <label 
                @click.stop="handleTrashClick(index, re.historyId)"
              >
                <uni-icons type="trash" size="18" color="#999" />
              </label>
            </view>
            <text 
              class="novel-progress" 
              @click="goRead(re.novel.novelId)"
            >阅读到:第{{ re.chapter.chapterIndex }}章 {{ re.chapter.title }}</text>
            <text class="novel-time">上次阅读时间:{{ formatDate(re.lastReadTime) }}</text>
          </view>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="isLoading">
        <text>加载更多...</text>
      </view>
      
      <!-- 删除确认弹窗 -->
      <view v-if="showConfirmDialog" class="dialog-overlay">
        <view class="dialog">
          <view class="dialog-body">
            <text class="dialog-content" v-if="currentDeleteIndex !== null">
              确定要删除《{{ novelList[currentDeleteIndex].novel.novelName }}》吗？
            </text>
            <text class="dialog-content" v-else>
              确定要清除所有阅读记录吗？
            </text>
          </view>
          <view class="dialog-footer">
            <text class="dialog-button cancel" @click="cancelAction">取消</text>
            <text class="dialog-button confirm" @click="confirmAction">确定</text>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
// 假设接口文件路径正确，需根据实际项目调整
import { ApigetHistoryPage, ApiClearHistory, ApiClearHistoryById } from "../api/novel.js";

// 数据状态
const novelList = ref([]);      // 阅读历史列表
const pageNum = ref(1);        // 当前页码
const size = ref(3);           // 每页条数（测试用，实际可改15）
const hasMore = ref(true);     // 是否还有更多数据
const isLoading = ref(false);  // 是否正在加载

// 时间格式化
const formatDate = (time) => {
  const date = new Date(time);
  return [
    date.getFullYear(), 
    String(date.getMonth() + 1).padStart(2, '0'), 
    String(date.getDate()).padStart(2, '0')
  ].join('-');
};

// 加载历史记录（支持分页）
const loadHistory = async (page = 1) => {
  if (!hasMore.value || isLoading.value) return; // 无更多数据或正在加载，直接返回
  isLoading.value = true;
  
  try {
    const res = await ApigetHistoryPage(page, size.value);
    if (page === 1) {
      novelList.value = res; // 第一页直接覆盖
    } else {
      novelList.value = [...novelList.value, ...res]; // 分页拼接
    }
    hasMore.value = res.length >= size.value; // 判断是否还有更多
  } finally {
    isLoading.value = false;
  }
};

// 滚动到底部加载更多
const loadMore = () => {
  if (!hasMore.value || isLoading.value) return;
  
  if (size.value === 15) { // 仅当分页大小为15时触发真正的分页
    pageNum.value++;
    loadHistory(pageNum.value);
  } else {
    uni.showToast({ title: "分页大小需为15", icon: "none" });
  }
};

// 初始化加载
onMounted(() => {
  loadHistory();
});

// 弹窗状态
const showConfirmDialog = ref(false); // 是否显示弹窗
const currentDeleteIndex = ref(null); // 当前删除项索引（单个删除时用）
const readId = ref(null);             // 历史记录ID（单个删除时用）

// 点击删除图标（单个删除）
const handleTrashClick = (index, readIdValue, e) => {
  e?.stopPropagation(); // 阻止事件冒泡（避免触发跳转）
  showDeleteConfirm(index, readIdValue);
};

// 显示删除确认弹窗（单个）
const showDeleteConfirm = (index, readIdValue) => {
  currentDeleteIndex.value = index;
  readId.value = readIdValue;
  showConfirmDialog.value = true;
};

// 点击清除按钮（全部删除）
const handleClearClick = () => {
  currentDeleteIndex.value = null; // 标记为“全部删除”
  showConfirmDialog.value = true;
};

// 取消操作
const cancelAction = () => {
  showConfirmDialog.value = false;
};

// 确认操作（单个/全部删除）
const confirmAction = async () => {
  try {
    if (currentDeleteIndex.value !== null) { // 单个删除
      const target = novelList.value[currentDeleteIndex.value];
      await ApiClearHistoryById(target.historyId); // 调用接口删除
      novelList.value.splice(currentDeleteIndex.value, 1); // 从列表移除
    } else { // 全部删除
      await ApiClearHistory(); // 调用接口清除全部
      novelList.value = [];    // 清空列表
      pageNum.value = 1;       // 重置页码
      hasMore.value = true;    // 允许重新加载
    }
  } finally {
    showConfirmDialog.value = false; // 关闭弹窗
  }
};

// 跳转到阅读页
const goRead = (novelId) => {
  uni.navigateTo({
    url: `/pages/novel/bookCover?bookId=${novelId}`
  });
};
</script>

<style lang="less" scoped>
/* 滚动容器：隐藏滚动条 + 占满视口 */
.scroll-container {
  /* 隐藏滚动条（多浏览器兼容） */
  ::-webkit-scrollbar { display: none; }
  scrollbar-width: none;
  -ms-overflow-style: none;
  
  height: 100vh; /* 确保滚动区域占满屏幕 */
}

/* 主容器：调整顶部间距，让头部更贴近顶部 */
.container {
  width: 100%;
  // 原 padding: 15px; 改为更细粒度控制：顶部8px，左右15px，底部15px
  padding: 8px 15px 15px; 
  box-sizing: border-box;
  display: flex;
  flex-direction: column; /* 头部 → 列表 → 加载提示 垂直排列 */
}

/* 头部区域 */
.header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px; /* 缩小与列表的间距（可选，根据设计调整） */
}

.clear-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.clear-text {
  color: #999;
  font-size: 14px;
  margin-right: 10px;
  cursor: pointer; /* 增加鼠标指针提示 */
}

.book-count {
  color: #999;
  font-size: 14px;
}

/* 小说列表区域：占满剩余空间，让空状态居中 */
.novel-list {
  flex: 1;          /* 占满容器剩余高度 */
  width: 100%;
  margin-top: 10px; /* 与头部保持间距（可选调整） */
}

/* 空状态：Flex 居中 */
.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center;     /* 水平居中 */
  color: #999;
  font-size: 14px;
}

.empty-image {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

/* 小说项布局 */
.novel-item {
  display: flex;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.novel-cover {
  width: 80px;
  height: 100px;
  object-fit: cover;
  margin-right: 15px;
  border-radius: 5px;
}

.novel-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0;
}

.novel-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.novel-title {
  font-size: 15px;
  font-weight: bold;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.novel-progress {
  color: #666;
  font-size: 14px;
  margin: 5px 0;
}

.novel-time {
  color: #999;
  font-size: 12px;
  margin: 5px 0;
}

/* 加载更多提示 */
.loading-more {
  text-align: center;
  padding: 20px;
  color: #999;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog {
  background-color: white;
  width: 80%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dialog-body {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.dialog-content {
  font-size: 16px;
  color: #333;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
}

.dialog-button {
  padding: 12px 0;
  border-radius: 20px;
  font-size: 14px;
  width: 45%;
  text-align: center;
}

.cancel {
  background-color: #e0e0e0;
  color: #333;
}

.confirm {
  background-color: #ff7a7a;
  color: white;
}
</style>